<template>
  <view class="cm-radio" 
    :class="[cmClass, !isRadioGroup ? 'cm-radio-inline' : '']"
    :style="[cmStyle]">
    
    <view class="cm-radio-group" v-if="isRadioGroup">
      <!-- 输入框前文字 -->
      <slot></slot>
      
      <view class="cm-radio-wrapper">
        <radio-group :class="[radioGroupClass]" @change="changeHandler">
          <label class="cm-radio-item cm-padding-8"
            :class="[radioItemClass, index !== 0 && groupType === 'block' ? 'app-border-color_ex-top' : '']"
            v-for="(item, index) in radioData" :key="index">
            <radio :color="radioColor"
              :style="[radioStyle]"
              :value="item.value" :disabled="item.disabled"
              :checked="item.value === value"
              @click="clickHandler(item, index)"></radio>
            <text>{{ item.text }}</text>            
          </label>
        </radio-group>
      </view>      
    </view>

    
    <radio v-else :color="radioColor"
      :style="[radioStyle]"
      :checked="checked" :disabled="disabled"
      @click="clickHandler(null, 0)"></radio>
    
  </view>
</template>

<script src="./cm-radio.js"></script>

<style lang="stylus">
@import './cm-radio.styl'
</style>
